<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta name="robots" content="nofollow">
    <link rel="stylesheet" href="../static/css/coursebase.css">
    <link rel="stylesheet" href="../static/css/index.css">
	<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />
	<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <style>
        .des img{
            max-width: 100%;
            margin: 10px 0;
        }

        .introduce {
            align-items: flex-start;
        }
    </style>
</head>
<body>
<section id="share">
    <div class="prism-player" id="player-con"></div>
    <p v-if="!haveCata"><img :src="course.courseImage" height="200px"/></p>
    <p class="title">{{course.courseName}}</p>
	<div id="app">
	</div>
    <div class="introduce">
        <p class="txt-center"><img :src="course.lecturerImg" alt="" width="40" height="40"></p>
        <p class="names txt-center">{{course.lecturerName}}</p>
        <p class="des" v-html="course.lecturerContent"></p>
    </div>
    <div class="classes">
        <img src="../static/img/icon.jpg" alt="" width="20" height="20">
        <div>
            <p class="names">课程介绍</p>
        </div>
    </div>
    <div class="des desc" v-html="course.detail"></div>
    <div class="bottom" >
        <img src="../static/img/logo.png" alt="" height="30">
        <button @click="godownload">立即下载</button>
        <button style="display: none">打开APP</button>
    </div>
</section>
</body>
<script type="text/javascript">
	var vue = new Vue({
		el : '#share',
		data: {
			message: 'Hello Vue!',
			player:'',
			page:1,
			accountInfoId:'',
			courseId:'[[${courseId}]]',
            haveCata:false,
			play:{				//云点播需要的四个参数
				akSecret:'',
				akid:'',
				token:'',
				vid:'',
			},
			course:{
				courseName:'',				//课程姓名
                courseImage:'',             //课程图片
				lecturerImg:'',				//讲师头像
				lecturerName:'',			//讲师姓名
				lecturerContent:'',			//讲师介绍
				detail:'',					//课程介绍
				isFree:'',					//第一个课程是否免费
			},
			recommends:{					//推荐课程
				//courseImage:'',				//课程图片
				//courseTitle:'',				//课程标题
			}
		  },
		methods : {
			createPlayer(allow){
				this.player = new Aliplayer({
                    "id": "player-con",
                    "vid": this.play.vid,
                    "accessKeyId": this.play.akid,
                    "securityToken": this.play.token,
                    "accessKeySecret": this.play.akSecret,
                    "region": "cn-shanghai",
                    "format": "mp4",
                    "mediaType": "video",
                    "width": "100%",
                    "height": "200px",
                    "autoplay": false,
                    "isLive": false,
                    "rePlay": false,
                    "playsinline": true,
                    "preload": true,
                    "controlBarVisibility": "hover",
                    "useH5Prism": true,
                    "skinLayout": [
                        {
                            "name": "bigPlayButton",
                            "align": "blabs",
                            "x": "42%",
                            "y": 80
                        },
                        {
                            "name": "H5Loading",
                            "align": "cc"
                        },
                        {
                            "name": "errorDisplay",
                            "align": "tlabs",
                            "x": 0,
                            "y": 0
                        },
                        {
                            "name": "infoDisplay"
                        },
                        {
                            "name": "tooltip",
                            "align": "blabs",
                            "x": 0,
                            "y": 56
                        },
                        {
                            "name": "thumbnail"
                        },
                        {
                            "name": "controlBar",
                            "align": "blabs",
                            "x": 0,
                            "y": 0,
                            "children": [
                                {
                                    "name": "progress",
                                    "align": "blabs",
                                    "x": 0,
                                    "y": 44
                                },
                                {
                                    "name": "playButton",
                                    "align": "tl",
                                    "x": 15,
                                    "y": 12
                                },
                                {
                                    "name": "timeDisplay",
                                    "align": "tl",
                                    "x": 10,
                                    "y": 7
                                },
                                {
                                    "name": "fullScreenButton",
                                    "align": "tr",
                                    "x": 10,
                                    "y": 12
                                },
                                {"name":"speedButton", "align":"tr","x":10, "y":23},
                                {
                                    "name": "volume",
                                    "align": "tr",
                                    "x": 5,
                                    "y": 10
                                },
                                {
                                    "name": "setting",
                                    "align": "tr",
                                    "x": 15,
                                    "y": 12
                                },
                                {
                                    "name": "speed",
                                    "align": "tr",
                                    "x": 10,
                                    "y": 23
                                },
                            ]
                        }
                    ]
			    	}, function (player) {
                    document.getElementsByClassName("prism-setting-cc")[0].style.display="none";
                    document.getElementsByClassName("prism-setting-audio")[0].style.display="none";
			    	    // player._switchLevel = 0;
			    	   /* if(allow){
                            console.log("进来了1")
			    	        this.player.play();
                        }*/
                     var firstplay = function () {
                        // this.$Message.error("请购买视频")
                         if(!allow){
                            player.pause()
                         }else{
                            player.play()
                         }
                    }
                     player.on('play',firstplay)
			    })
			},
			godownload(){
				window.location.href = "/base/common/sharePage?type=10";
			}
		},
		created: function () {
			this.$http.get("/base/common/courseDetail",{params:{courseId:this.courseId,pageNumber:1}}).then(res =>{
			    this.play.akSecret = res.data.data.akSecret;
                this.play.akid = res.data.data.akid;
                this.play.token = res.data.data.token;
                this.course.courseName = res.data.data.courseDetail.courseName;
                this.course.courseImage = res.data.data.courseDetail.courseImage;
                this.course.lecturerImg = res.data.data.courseDetail.lecturerImg;
                this.course.lecturerName = res.data.data.courseDetail.lecturerName;
                this.course.lecturerContent = res.data.data.courseDetail.lecturerContent;
                this.course.detail = res.data.data.courseDetail.detail;
                this.recommends = res.data.data.recommends;
                if(res.data.data.catalog.length > 0){
                    this.play.vid = res.data.data.catalog[0].twoList[0].videoId;
                    if(res.data.data.catalog[0].twoList[0].isFree !== 1) {
                        this.createPlayer(true);
                    }else{
                        this.createPlayer(false);
                    }
                        this.haveCata = true;
                }else{
                   this.haveCata = false;
                }
            }),function(){
                console.log('请求失败');
            };
		}
	});
</script>

</html>
